<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main style="display: flex">
        <div>
          <div class="header_right" @click="showCardNav = !showCardNav">
            <div class="title">搜索</div>
            <div>
              <transition name="from"></transition>
              <span v-show="!showCardNav">
                <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
              </span>
              <transition name="to"></transition>
              <span v-show="showCardNav">
                <i style="margin-right: 5px" class="el-icon-arrow-up"></i>
              </span>
            </div>
          </div>
          <div v-show="showCardNav" class="hr"></div>
          <el-collapse-transition>
            <div v-show="showCardNav">
              <div class="search">
                <span style="display: inline-block;margin-bottom: 10px;">
                  <span style="margin-right: 12px">工程名称</span>
                  <el-input v-model="tableParam.engineeringName" style="width: 240px" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
                </span>
                <span style="margin-left: 24px">
                  <span style="margin-right: 12px">订单号</span>
                  <el-input v-model="tableParam.orderNo" style="width: 240px" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
                </span>
                <span style="margin-left: 24px">
                  <span style="margin-right: 12px">浇筑部位</span>
                  <el-input v-model="tableParam.structuralParts" style="width: 240px" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
                </span>
                <el-button icon="el-icon-search" size="medium" class="bottom_all" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
                <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="init()">重 置</el-button>
              </div>
            </div>
          </el-collapse-transition>
          <div class="hr"></div>
          <div class="card" style="padding-top:10px">
            <div v-loading="tableLoading" class="card_info" :style="style">
              <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="tableData" tooltip-effect="dark">
                <template v-for="(item, index2) in table">
                  <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width">
                    <template slot-scope="scope">
                      <span v-if="item.label == '开盘情况'">
                        <el-button size="mini" class="bottom_one" @click="open('dialog1',scope.row)">查看</el-button>
                      </span>
                      <span v-else-if="item.label == '前场工长'">
                        <span>{{userinfo.userRealName}}</span>
                      </span>
                      <span v-else-if="item.label == '收盘情况'">
                        <el-button size="mini" class="bottom_one" @click="open('dialog2',scope.row)">查看</el-button>
                      </span>
                      <span v-else-if="item.label == '施工日志'">
                        <el-button size="mini" class="bottom_one" @click="open('dialog3',scope.row)">查看</el-button>
                      </span>
                      <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
            <div class="card_bottom">
              <div class="card_bottom_left">
                <div class="top_page_totle">总共{{ total }}条</div>
                <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="gettableData()"></el-pagination>
              </div>
              <div>
                <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 开盘情况 -->
    <el-dialog v-dialogDrag :visible.sync="dialog1" width="960px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">开盘情况</span>
      <div class="dialoginfo">
        <el-form :inline="true" label-width="140px" label-position="right">
          <el-form-item label="工程名称：">
            <div style="width:290px">{{from1.name}}</div>
          </el-form-item>
          <el-form-item label="开盘时间：">
            <div style="width:290px">{{from1.openTime}}</div>
          </el-form-item>
          <el-form-item label="施工作业面情况：">
            <div style="width:290px">{{from1.roadworkCase}}</div>
          </el-form-item>
          <el-form-item label="现场设备状况：">
            <div style="width:290px">{{from1.localeFacilityCase}}</div>
          </el-form-item>
          <el-form-item label="现场人员状况：">
            <div style="width:290px">{{from1.localeCrewCase}}</div>
          </el-form-item>
          <el-form-item label="与施工方沟通情况：">
            <div style="width:290px">{{from1.communicationCase}}</div>
          </el-form-item>
          <el-form-item label="与责任预算三核情况：">
            <div style="width:290px">{{from1.budgetCase}}</div>
          </el-form-item>
          <el-form-item label="砂浆去向：">
            <div style="width:290px">{{from1.mortarDispositon}}</div>
          </el-form-item>
          <el-form-item label="其他：">
            <div style="width:290px">{{from1.other}}</div>
          </el-form-item>
          <el-form-item label="汇报人：">
            <div style="width:290px">{{from1.createUserName}}</div>
          </el-form-item>
          <el-form-item label="附件图片：" label-width="90px">
          </el-form-item>
        </el-form>
        <div v-if="from1.imgs">
          <el-image v-for="(item, index) in from1.imgs.split(',')" :key="index" style="width: 200px; height:200px;margin:0 10px 10px 10px;border-radius: 4px;" :src="item" :preview-src-list="from1.imgs.split(',')" :z-index="10000"></el-image>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="dialog1=false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 收盘情况 -->
    <el-dialog v-dialogDrag :visible.sync="dialog2" width="960px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">收盘情况</span>
      <div class="dialoginfo">
        <el-form :inline="true" label-width="140px" label-position="right">
          <el-form-item label="工程名称">
            <div style="width:290px">{{from2.name}}</div>
          </el-form-item>
          <el-form-item label="工程部位">
            <div style="width:290px">{{from2.pouringPart}}</div>
          </el-form-item>
          <el-form-item label="收盘时间">
            <div style="width:290px">{{from2.closingTime}}</div>
          </el-form-item>
          <el-form-item label="洗泵水去向">
            <div style="width:290px">{{from2.washWaterPump}}</div>
          </el-form-item>
          <el-form-item label="设备状态及去向">
            <div style="width:290px">{{from2.facilityStatus}}</div>
          </el-form-item>
          <el-form-item label="人员状态及去向">
            <div style="width:290px">{{from2.crewStatus}}</div>
          </el-form-item>
          <el-form-item label="汇报人">
            <div style="width:290px">{{from2.createUserName}}</div>
          </el-form-item>
          <div>
            <el-form-item label="附件图片：" label-width="90px">
            </el-form-item>
          </div>
        </el-form>
        <div v-if="from2.imgs">
          <el-image v-for="(item, index) in from2.imgs.split(',')" :key="index" style="width: 200px; height:200px;margin:0 10px 10px 10px;border-radius: 4px;" :src="item" :preview-src-list="from2.imgs.split(',')" :z-index="10000"></el-image>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="dialog2=false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 施工日志 -->
    <el-dialog v-dialogDrag :visible.sync="dialog3" width="1080px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">施工日志</span>
      <div class="dialoginfo">
        <el-form :inline="true" label-width="90px" label-position="right">
          <el-form-item label="工程名称">
            <div style="width:230px">{{low.engineeringName}}</div>
          </el-form-item>
          <el-form-item label="浇筑部位">
            <div style="width:230px">{{low.structuralParts}}</div>
          </el-form-item>
          <el-form-item label="供应站点">
            <div style="width:230px">{{table3[0]?table3[0].supplyStation:''}}</div>
          </el-form-item>
          <el-form-item label="开盘时间">
            <div style="width:230px">{{table3[0]?table3[0].openingTime:''}}</div>
          </el-form-item>
          <el-form-item label="计划量">
            <div style="width:230px">{{table3[0]?table3[0].planNum:''}}</div>
          </el-form-item>
          <el-form-item label="产品名称">
            <div style="width:230px">{{low.productName}}</div>
          </el-form-item>
          <el-form-item label="浇筑方式">
            <div style="width:230px">{{low.pouringMethod0}}</div>
          </el-form-item>
        </el-form>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="table3" tooltip-effect="dark">
          <el-table-column prop="openingTime" label="开盘时间" width="120" align="center"></el-table-column>
          <el-table-column prop="endingTime" label="收尾时间" width="120" align="center"></el-table-column>
          <el-table-column prop="actualNum" label="实供量" width="120" align="center"></el-table-column>
          <el-table-column prop="concreteQuality" label="砼质量&塌落度" width="160" align="center"></el-table-column>
          <el-table-column prop="supplyPledge" label="供应保证" width="120" align="center"></el-table-column>
          <el-table-column prop="burstMode" label="爆模&砼报废&签证" width="160" align="center"></el-table-column>
          <el-table-column prop="tailing" label="尾料转移&管内余料" width="160" align="center"></el-table-column>
          <el-table-column prop="worst" label="最差及原因" width="140" align="center"></el-table-column>
          <el-table-column prop="dimensionCheck" label="尺寸检查" width="120" align="center"></el-table-column>
          <el-table-column prop="successionIs" label="交接班情况" width="140" align="center"></el-table-column>
          <el-table-column prop="localeSafetyIs" label="安全情况" width="120" align="center"></el-table-column>
          <el-table-column prop="logTime" label="日期" width="120" align="center"></el-table-column>
          <el-table-column prop="updateTime" label="图片" fixed="right" width="100" align="center">
            <template slot-scope="scope">
              <span class="table_link" @click="open1(scope.row)">查看</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="dialog3=false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 查看图片 -->
    <ShowDetails :dialog="imgsDialog" :imgsText="imgsText" :imgList="imgList" :mp4List="mp4List" :fileList="fileList" @reset="reset"></ShowDetails>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import ShowDetails from '@/components/showdetails';
import {
  queryPage,
  opening,
  closing,
  getListByPlanId,
} from "@/api/smart/schedul/frontLog.js";
import { getUserInfo } from "@/utils/auth.js";
export default {
  mixins: [mixin],
  components: {
    ShowDetails
  },
  data() {
    return {
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      imgsText: '',
      imgList: [],
      mp4List: [],
      fileList: [],
      /*表格数据*/
      table: [
        {
          label: "工程名称",
          width: "auto",
          prop: "engineeringName",
          status: true,
        },
        { label: "订单编号", width: "auto", prop: "orderNo", status: true },
        {
          label: "浇筑部位",
          width: "auto",
          prop: "structuralParts",
          status: true,
        },
        { label: "前场工长", width: "auto", prop: "", status: true },
        { label: "开盘情况", width: "120", prop: "", status: true },
        { label: "收盘情况", width: "120", prop: "", status: true },
        { label: "施工日志", width: "120", prop: "", status: true },
      ],
      pagesType: 0,
      /*添加表单数据*/
      rules: {
        code: [{ required: true, message: "请输入站点编码", trigger: "blur" }],
      },
      fromDate: {
        code: "",
      },
      low: "",
      /*开盘情况*/
      dialog1: false,
      from1: {
        imgs: "",
      },
      /*收盘情况*/
      dialog2: false,
      from2: {
        imgs: "",
      },
      /*施工日志*/
      dialog3: false,
      imgsDialog: false,
      table3: [{}],
      from3: {},
      row3: "",
      userinfo: getUserInfo(),
    };
  },
  created() {
    this.tableParam = {
      ...this.tableParam,
      engineeringName: "",
      contractNo: "",
    };
    this.gettableData();
  },
  methods: {
    /*重置数据*/
    init() {
      this.tableParam.structuralParts = "";
      this.tableParam.engineeringName = "";
      this.tableParam.contractNo = "";
      this.gettableData();
    },
    open(key, low) {
      this.low = low;
      if (key == "dialog1") {
        opening({ planId: low.planId }).then((res) => {
          this.from1 = { ...this.from1, ...res.data };
        });
      }
      if (key == "dialog2") {
        closing({ planId: low.planId }).then((res) => {
          this.from2 = { ...this.from2, ...res.data };
        });
      }
      if (key == "dialog3") {
        getListByPlanId({ planId: low.planId }).then((res) => {
          this.table3 = res.data;
          if (this.low.pouringMethod) {
            this.low.pouringMethod0 = JSON.parse(this.low.pouringMethod).map((res) => res.name)
            console.log(this.low.pouringMethod0);
            this.low.pouringMethod0 = this.low.pouringMethod0.join('、')
          }
        });
      }
      this[key] = true;
    },
    open1(row) {
      const files = row.imgs;
      let items = files?.split(",").map(res => ('/file/' + res))
      this.imgList = items.filter(res => (res.includes('type=img')))
      this.mp4List = items.filter(res => (res.includes('type=mp4')))
      this.fileList = items.filter(res => (res.includes('type=file')))
      this.imgsDialog = true
    },
    reset(key) {
      this[key] = false;
    },
    pagessubmitFromDate() {
      let _this = this;
      _this.$refs.reffromDate.validate((valid) => {
        if (valid) {
          _this.submitFromDate();
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input,
.el-select {
  width: 240px;
}
/*
 <el-link class="table_link" :underline="false">查看配合比</el-link>*/
.table_link {
  margin: 0 10px;
  color: $bg_color;
  cursor: pointer;
}

.table_link:hover {
  opacity: 0.8;
}
</style>
